<script setup>

import { ref, watch } from 'vue';
import { sunChart } from '../api/weatherAPI';
import { useCityStore } from '../stores/cityStore'
import { renderSunChart } from '../util/sunchart';
import dayjs from 'dayjs';
const cityStore = useCityStore();
const currentDate = ref(dayjs().format('YYYYMMDD'));

watch(
    //[必选]监听的数据源
    () => cityStore.location,
    //【必选】回调函数，当数据源有变化时，需要做的事情
    () => {
        const locationId = cityStore.location?.id;
        if (locationId) {
            getData(locationId);
        }
    },
    { immediate: true }
);
// getData(cityStore.location.id);
const update = ref([]);
const sunrise = ref([]);
const sunset = ref([]);
//  const id='101010100'
//  getData(id);
console.log(currentDate.value)
async function getData(locationID) {
    const res = await sunChart(locationID, currentDate.value);
console.log(res)
   update.value = res.updateTime;
    sunrise.value = res.sunrise;
    sunset.value = res.sunset;
   if(chartDom.value){
    renderSunChart(chartDom.value, sunrise.value, sunset.value,update.value);
   }

}
const chartDom = ref(null);
</script>

<template>
    <div id="main" ref="chartDom">
    </div>
</template>

<style scoped>
    #main {
        width: 100%;
        height: 400px;
        margin: 20px auto;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        background: white;
        padding: 20px;
    }
</style>